<template>
    <div id="header">
        <!-- Header -->
            <div class="header">
			
				<!-- Logo -->
                <div class="header-left">
                    <a href="#" class="logo">
						<img src="../assets/img/logo.png" alt="Logo">
					</a>
					<a href="#" class="logo logo-small">
						<img src="../assets/img/logo-small.png" alt="Logo" width="30" height="30">
					</a>
                </div>
				<!-- /Logo -->
				
				<a href="javascript:void(0);" id="toggle_btn">
					<i class="fas fa-align-left"></i>
				</a>
				
				<!-- Search Bar -->
				<div class="top-nav-search">
					<form>
						<input type="text" class="form-control" :placeholder="$t('wrapper_header.searchBar_tip')">
						<button class="btn" type="reset"><i class="fas fa-search"></i></button>
					</form>
				</div>
				<!-- /Search Bar -->
				
				<!-- Mobile Menu Toggle -->
				<a class="mobile_btn" id="mobile_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Mobile Menu Toggle -->
				
				<!-- Header Right Menu -->
				<ul class="nav user-menu">

					<!-- Notifications -->
					<li class="nav-item dropdown noti-dropdown">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<i class="far fa-bell"></i> <span class="badge badge-pill">3</span>
						</a>
						<div class="dropdown-menu notifications">
							<div class="topnav-dropdown-header">
								<span class="notification-title">Notifications</span>
								<a href="javascript:void(0)" class="clear-noti"> Clear All </a>
							</div>
							<div class="noti-content">
								<ul class="notification-list">
									<li class="notification-message">
										<a href="#">
											<div class="media">
												<span class="avatar avatar-sm">
													<img class="avatar-img rounded-circle" alt="User Image" src="../assets/img/profiles/avatar-02.jpg">
												</span>
												<div class="media-body">
													<p class="noti-details"><span class="noti-title">Carlson Tech</span> has approved <span class="noti-title">your estimate</span></p>
													<p class="noti-time"><span class="notification-time">4 mins ago</span></p>
												</div>
											</div>
										</a>
									</li>
									<li class="notification-message">
										<a href="#">
											<div class="media">
												<span class="avatar avatar-sm">
													<img class="avatar-img rounded-circle" alt="User Image" src="../assets/img/profiles/avatar-11.jpg">
												</span>
												<div class="media-body">
													<p class="noti-details"><span class="noti-title">International Software Inc</span> has sent you a invoice in the amount of <span class="noti-title">$218</span></p>
													<p class="noti-time"><span class="notification-time">6 mins ago</span></p>
												</div>
											</div>
										</a>
									</li>
									<li class="notification-message">
										<a href="#">
											<div class="media">
												<span class="avatar avatar-sm">
													<img class="avatar-img rounded-circle" alt="User Image" src="../assets/img/profiles/avatar-17.jpg">
												</span>
												<div class="media-body">
												<p class="noti-details"><span class="noti-title">John Hendry</span> sent a cancellation request <span class="noti-title">Apple iPhone XR</span></p>
												<p class="noti-time"><span class="notification-time">8 mins ago</span></p>
												</div>
											</div>
										</a>
									</li>
									<li class="notification-message">
										<a href="#">
											<div class="media">
												<span class="avatar avatar-sm">
													<img class="avatar-img rounded-circle" alt="User Image" src="../assets/img/profiles/avatar-13.jpg">
												</span>
												<div class="media-body">
													<p class="noti-details"><span class="noti-title">Mercury Software Inc</span> added a new product <span class="noti-title">Apple MacBook Pro</span></p>
													<p class="noti-time"><span class="notification-time">12 mins ago</span></p>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<div class="topnav-dropdown-footer">
								<a href="#">View all Notifications</a>
							</div>
						</div>
					</li>
					<!-- /Notifications -->

					<button type="button" class="btn-lang btn btn-outline-secondary btn-sm" @click="switch_the_language">{{language}}</button>
					
					<!-- User Menu -->
					<li class="nav-item dropdown has-arrow">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img"><img class="rounded-circle" src="../assets/img/avatar_headSculpture.jpg" width="31" alt="Ryan Taylor"></span>
						</a>
						<div class="dropdown-menu">
							<div class="user-header">
								<div class="avatar avatar-sm">
									<img src="../assets/img/avatar_headSculpture.jpg" alt="User Image" class="avatar-img rounded-circle">
								</div>
								<div class="user-text">
									<h6>{{username}}</h6>
									<p class="text-muted mb-0">{{userType==='stu'?$t('wrapper_header.userType_stu'):(userType==='tea'?$t('wrapper_header.userType_tea'):(userType!=''?'Administrator':'Guest'))}}</p>
								</div>
							</div>
							<router-link class="dropdown-item" :to="{path:'/myprofile'}" >{{$t('wrapper_header.profile')}}</router-link>
							<a class="dropdown-item" href="#" @click="signout">{{$t('wrapper_header.logout')}}</a>
						</div>
					</li>
					<!-- /User Menu -->
					
				</ul>
				<!-- /Header Right Menu -->
				
            </div>
			<!-- /Header -->
    </div>
</template>

<script>
export default {
  mounted:function(){
      this.username = localStorage.getItem('username'),
      this.userType = localStorage.getItem('userType')
  },
  data(){
      return {
		username: '',
		userType: '',
		language: 'EN'
      }
  },
  methods: {
    // 语言切换的方法
    switch_the_language() {
      // console.log(this.$i18n.locale)
      if (this.$i18n.locale === 'zh') {
        this.$i18n.locale = 'en',
        this.language = '中'
      } else {
        this.$i18n.locale = 'zh',
        this.language = 'EN'
      }
    },
    // 注销
    signout() {
        let config = {
            method: 'get',
            url: 'auth/logout'
            // xhrFields: {
            //     withCredentials: true
            // }, 
            /* 发送url拼参用params, json用data(get请求只支持params,post请求支持params和data,使用post发送data时处理跨域用withCredentials)
               已在main.js全局配置*/
        };
        this.$http(config)
        .then((response)=>{
            if(response.data.statusCode === 1){
                localStorage.removeItem('Authorization'),
                localStorage.removeItem('username'),
                localStorage.removeItem('userType'),
                this.$router.push({ path: "/" });
                this.$message.success(response.data.msg);
            }else{
                // 消息弹窗：方式一
                this.$message({
                    message: response.data.msg,
                    type: 'error',
                    //type 取值 success(成功) /warning(警告)/info(消息)/error(错误)/;
                });
            }
        })
        .catch(error => {
            // 消息弹窗：方式贰
            this.$message.error("操作失败，请重试或者联系管理员" + error);
        });
    },
	
  }
}
</script>